<template>
    <!-- cid作为请求 然后拿到数据后 显示某一个 可换-->
    <div v-if="cId7.type === 1">
        <div id="main7_1" style="width: 100% !important; height: 100% !important;"></div>
    </div>
    <div v-else-if="cId7.type === 2">
        <div id="main7_2" style="width: 100% !important; height: 100% !important;"></div>
    </div>
    <div v-else-if="cId7.type === 3">
        <div id="main7_3" style="width: 100% !important; height: 100% !important;"></div>
    </div>
    <div class="device_data" v-else-if="cId7.type === 4">
        <div>
            <div class="d_info">
                <div :style="{ color: cId7.statis_data.title_color[0] }">{{ cId7.statis_data.data[0].value }}</div>
                <div :style="{ color: cId7.statis_data.title_color[0] }">{{ cId7.statis_data.data[0].name }}</div>
            </div>
            <div class="d_info">
                <div :style="{ color: cId7.statis_data.title_color[1] }">{{ cId7.statis_data.data[1].value }}</div>
                <div :style="{ color: cId7.statis_data.title_color[1] }">{{ cId7.statis_data.data[1].name }}</div>
            </div>
        </div>
        <div>
            <div class="d_info d_bottom_info">
                <div :style="{ color: cId7.statis_data.title_color[2] }">{{ cId7.statis_data.data[2].value }}</div>
                <div :style="{ color: cId7.statis_data.title_color[2] }">{{ cId7.statis_data.data[2].name }}</div>
            </div>
            <div class="d_info d_bottom_info">
                <div :style="{ color: cId7.statis_data.title_color[3] }">{{ cId7.statis_data.data[3].value }}</div>
                <div :style="{ color: cId7.statis_data.title_color[3] }">{{ cId7.statis_data.data[3].name }}</div>
            </div>
        </div>
    </div>
    <div class="device_data" v-else-if="cId7.type === 5">
        <iframe v-if="cId7.weatherType !== 2" width="100%" scrolling="no" height="120%" frameborder="0"
            allowtransparency="true" :src="'https://i.tianqi.com?c=code&id=' + cId7.weatherType + '&color=%23' + cId7.weatherColor + '&icon=' + cId7.weatherIcon + '&py=请选择&site=' +
                cId7.weatherSize" style="pointer-events: none;height: 120% !important;"></iframe>
        <!-- 多天的预报 可以调节显示几天 -->
        <iframe v-if="cId7.weatherType == 2" width="100%" scrolling="no" height="120%" frameborder="0"
            allowtransparency="true" :src="'https://i.tianqi.com?c=code&id=2&color=%23' + cId7.weatherColor + '&icon=' + cId7.weatherIcon + '&py=请选择&num=' + cId7.weatherNumDay + '&site=' +
                cId7.weatherSize" style="pointer-events: none;height: 120% !important;"></iframe>
    </div>
    <div v-else-if="cId7.type === 6" class="sixDataV">
        <dv-scroll-board v-if="showComponentSix" :config="cId7.from_data" style="width:100%;height:100%" />
    </div>
    <div v-else-if="cId7.type === 7" style="position: relative; width: 100% !important;height: 100% !important;">
        <video id="myVideo" :src="cId7.videoURL"
            style="position: absolute;left: 0; width: 100% !important;height: 100% !important; object-fit: cover;"
            playsinline webkit-playsinline loop autoplay controls></video>

    </div>
</template>
<script>
export default {
    props: {
        cId7: {},
        statistics: {}
    },
    data() {
        return {
            // cId7: cId7
            showComponentSix: false,
            color: this.cId7.from_data.color,
            player: null,
        }
    },

    watch: {
        // color(newVal) {
        // document.documentElement.style.setProperty('color', newVal);
        // }
    },
    mounted() {
        var that = this
        setTimeout(() => { that.showOption() }, 200)
    },
    created() {
        this.$forceUpdate();
    },
    methods: {
        showOption() {
            this.$forceUpdate();
            // var chartDom = document.getElementById('moment_flow');
            // // // var option = {}
            // var myChart = echarts.init(chartDom, null, {
            //     minwidth: 70,
            //     minheight: 100
            // });
            // myChart.clear();
            if (this.cId7.type == 1) {
                // 饼图
                // console.log('饼图')
                var chartDom = document.getElementById('main7_1');
                var myChart = echarts.init(chartDom, null, {
                    minwidth: 70,
                    minheight: 100
                });
                myChart.clear();
                var option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        show: this.cId7.pie.legend,
                        orient: this.cId7.pie.direction,
                        top: this.cId7.pie.legend_top,
                        left: this.cId7.pie.legend_left,
                        textStyle: {
                            color: this.cId7.pie.legend_color,  // 设置图例文字的颜色为红色
                        },
                    },

                    series: [
                        {
                            name: this.cId7.pie.title,
                            type: 'pie',
                            roseType: this.cId7.pie.roseType, // 将饼图转换为南丁格尔图 area  radius
                            radius: this.cId7.pie.radius,
                            center: this.cId7.pie.dynamicCenter,
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#b1b5b3',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 24,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: this.cId7.pie.data
                        }
                    ]
                }
                option && myChart.setOption(option);

            } else if (this.cId7.type == 2) {
                // 柱图
                // console.log('柱图2')
                var chartDom = document.getElementById('main7_2');
                var myChart = echarts.init(chartDom, null, {
                    minwidth: 70,
                    minheight: 100
                });
                myChart.clear();
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // legend: {
                    //     show: true,
                    //     data: ["累计热量(GJ)", "累计流量(T)"], // 设置图例的数据项
                    //     right: 20, // 设置图例组件离容器右侧的距离
                    //     textStyle: {
                    //         color: "#fff"
                    //     }
                    // },
                    grid: {
                        left: this.cId7.columnar.grid_left,
                        right: this.cId7.columnar.grid_right,
                        bottom: this.cId7.columnar.grid_bottom,
                        top: this.cId7.columnar.grid_top,
                        containLabel: true  //横坐标显示与隐藏
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.cId7.columnar.dataX,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                color: this.cId7.columnar.axis_color // 设置横坐标文字颜色为红色
                            }
                            // axisLine: { show: false }, // 隐藏横坐标轴线
                            // axisLabel: { show: false } // 隐藏横坐标标签
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                color: this.cId7.columnar.yaxis_color // 设置纵坐标文字颜色为蓝色
                                // color: 'rgba(145, 205, 118,1)' // 设置纵坐标文字颜色为蓝色
                            },
                            // axisLine: { show: true }, // 隐藏纵坐标轴线
                            // axisLabel: { show: true } // 隐藏纵坐标标签
                        }
                    ],
                    series: this.cId7.columnar.dataY
                    //  [
                    //     {
                    //         name: 'Direct',
                    //         type: 'bar',
                    //         barWidth: this.cId7.columnar.border_width,
                    //         data: this.cId7.columnar.dataY,
                    //         itemStyle: {
                    //             color: this.cId7.columnar.series_color, // 设置柱状图的颜色为蓝色
                    //         },
                    //     },
                    //     {
                    //         name: 'Direct1',
                    //         type: 'bar',
                    //         barWidth: this.cId7.columnar.border_width,
                    //         data: this.cId7.columnar.dataY1,
                    //         itemStyle: {
                    //             color: '#fff', // 设置柱状图的颜色为蓝色
                    //         },
                    //     }
                    // ]
                };

                option && myChart.setOption(option);

            } else if (this.cId7.type == 3) {
                // 折线
                // console.log('折线321')
                var chartDom = document.getElementById('main7_3');
                var myChart = echarts.init(chartDom, null, {
                    minwidth: 70,
                    minheight: 100
                });


                myChart.clear();
                // var myChart = echarts.init(chartDom);
                var option = {
                    grid: {
                        left: this.cId7.fold_line.grid_left,
                        right: this.cId7.fold_line.grid_right,
                        bottom: this.cId7.fold_line.grid_bottom,
                        top: this.cId7.fold_line.grid_top,
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross', // 设置指示器类型为十字准星
                            lineStyle: {
                                color: 'auto' // 使用线条本身的颜色
                            }
                        },
                        formatter: function (params) {
                            let content = ''; // 初始化内容字符串
                            params.forEach(function (item) {
                                content += item.seriesName + ': ' + item.value + '<br>'; // 每个系列显示其名称和值
                            });
                            return content;
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.cId7.fold_line.dataX,
                        axisLabel: {
                            color: this.cId7.fold_line.axis_color // 设置横坐标文字颜色为红色
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            color: this.cId7.fold_line.yaxis_color // 设置纵坐标文字颜色为蓝色
                        },
                    },
                    series: this.cId7.fold_line.style_group
                };

                option && myChart.setOption(option);


            } else if (this.cId7.type == 4) {
            } else if (this.cId7.type == 5) {

            } else if (this.cId7.type == 6) {
                // console.log('66666666664', this.cId7)
                this.color = this.cId7.from_data.color
                this.$forceUpdate();
                this.showComponentSix = false;
                this.$nextTick(() => {
                    this.showComponentSix = true;
                });
            } else if (this.cId7.type == 7) {
                //监控视频

                // 拿到时间后  按照循环时间改变 cId7.videoURL

                for (let index = 0; index < this.cId7.currentVideoGroup.length; index++) {
                    setTimeout(() => {
                        this.cId7.videoURL = cId7.currentVideoGroup[index].url
                    }, this.cId7.videoTurnTime);
                }
                this.player = new EZUIKit.EZUIPlayer("myVideo");

            }
        },
    }
}
</script>
<style scoped>
.device_data {
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
}

.device_data>div {
    width: 100%;
    height: 50%;
    /* border: 1px solid yellow; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.d_info {
    height: 80%;
    width: 30%;
    /* border: 1px solid black; */
    border-radius: 0.4rem 0.4rem 0.2rem 0.2rem;
    background: linear-gradient(to top,
            rgb(28, 70, 88, 1),
            rgb(28, 70, 88, 0.6),
            rgba(255, 255, 255, 0) 70%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sixDataV {
    width: 100% !important;
    height: 100% !important;
}

/* 表格显示 */
.sixDataV /deep/ .header {
    /* color: green !important; */
    color: var(color) !important;
}

/* 视频 */
#myVideo {
    width: 100% !important;
    height: 100% !important;
    /* border: 2px solid red; */
    -o-object-fit: fill;
    -ms-object-fit: fill;
    -moz-object-fit: fill;
    -webkit-object-fit: fill;
    object-fit: fill;
    font-size: 16px;
    /* margin-top: 4px; */
}
</style>